<template>
  <view>
    <canvas canvas-id="canvas" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      canvasWidth: 300,
      canvasHeight: 200,
      buttonX: 50,
      buttonY: 50,
      buttonWidth: 150,
      buttonHeight: 50,
      isButtonPressed: false
    };
  },
  onReady() {
    const ctx = uni.createCanvasContext('canvas', this);
    ctx.fillStyle = '#333';
    ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
    ctx.fillStyle = '#0f0';
    ctx.fillRect(this.buttonX, this.buttonY, this.buttonWidth, this.buttonHeight);
    ctx.draw();
  },
  methods: {
    touchStart(event) {
      const touch = event.touches[0];
      const x = touch.x;
      const y = touch.y;
      if (x >= this.buttonX && x <= this.buttonX + this.buttonWidth &&
          y >= this.buttonY && y <= this.buttonY + this.buttonHeight) {
        this.isButtonPressed = true;
      }
    },
    touchMove(event) {
      if (this.isButtonPressed) {
        // 处理按钮按下时的移动逻辑
      }
    },
    touchEnd(event) {
      if (this.isButtonPressed) {
        this.isButtonPressed = false;
        // 处理按钮松开时的逻辑，例如触发点击事件
        console.log('Button clicked');
      }
    }
  }
};
</script>
 
<style>
/* 样式可以根据需要添加，这里仅为了展示canvas */
canvas {
  border: 1px solid #000;
}
</style>